<template>
  <view class="container">
    <view :key="k" class="item" v-for="(i, k) in list">
      <view class="" style="display: flex; align-items: center">
        <image :src="img_url + i.user.avatar" style="width: 100rpx; height: 100rpx; border-radius: 50%" mode=""></image>
        <view style="margin-left: 24rpx">
          <view>
            <text style="font-weight: 500; font-size: 32rpx; color: #151515">{{ i.user.nickname }}</text>
            <image :src="i.user.gender == 2 ? '../../static/myimg/a9.png' : '../../static/myimg/a8.png'" style="width: 28rpx; height: 28rpx; margin-left: 12rpx" mode=""></image>
          </view>
          <view>
            <text style="font-weight: 400; font-size: 28rpx; color: #666666">{{ i.group.group_name }}</text>
            <text style="font-weight: 400; font-size: 24rpx; color: #cccfdb; padding-left: 5rpx">14:23</text>
          </view>
        </view>
      </view>

      <view style="display: flex; align-items: center">
        <view
          style="
            width: 108rpx;
            height: 52rpx;
            background: #ff3742;
            border-radius: 26rpx 26rpx 26rpx 26rpx;
            text-align: center;
            line-height: 52rpx;
            font-weight: 500;
            font-size: 24rpx;
            color: #ffffff;
          "
          @tap="del(i.id)"
        >
          拒绝
        </view>
        <view
          style="
            width: 108rpx;
            height: 52rpx;
            background: #feff01;
            border-radius: 26rpx 26rpx 26rpx 26rpx;
            text-align: center;
            line-height: 52rpx;
            margin-left: 16rpx;
            font-weight: 500;
            font-size: 24rpx;
            color: #151515;
          "
          @tap="agree(i.id)"
        >
          同意
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      gender: 1,
      list: [],
      img_url: this.img_url
    };
  },
  methods: {
    getApplyGroupLog() {
      this.http('/group/getApplyGroupLog', {}).then((res) => {
        this.list = res.data;
      });
    },
    del(e) {
      this.http('/group/refuseApplyGroup', {
        group_apply_log_id: e
      }).then((res) => {
        this.getApplyGroupLog();
      });
    },
    agree(e) {
      this.http('/group/agreeApplyGroup', {
        group_apply_log_id: e
      }).then((res) => {
        this.getApplyGroupLog();
      });
    }
  },
  onShow() {
    this.getApplyGroupLog();
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  padding: 0 30rpx;

  .item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 0;
    border-bottom: 2rpx solid #e8e8e8;
  }
}
</style>
